在第八天有做一個完整的 demo

前端會拿到類似這樣的資料來渲染 sidebar 菜單，今天我們來模擬實際狀況

TLTD

• 後端
  • 寫一隻API回傳固定格式
• 前端
  • 改2個檔案
  • \pure-admin-thin\src\utils\http\index.ts
  • \pure-admin-thin\.env.development
• 補充如何傳參數修改 baseURL

後端

這系列重點放在前端的 pure-admin 上面所以後端就寫一個簡易的demo

//開一個新專案
//需要安裝 express 和 cors 套件
//檔案取名叫 index.js
//執行指令 node index.js

const express = require("express");
const app = express();

//參考 https://ithelp.ithome.com.tw/articles/10242452
//CORS是非常常見的問題，簡單來說就是不同網站打API收發資料要有一定的限制，不能亂打
const cors = require("cors");
app.use(cors());
//
const systemRouter = {
    path: "/system",
    meta: {
      icon: "setting",
      title: "menus.hssysManagement",
      rank: 11
    },
    children: [
      {
        path: "/system/role/index",
        name: "Role",
        meta: {
          icon: "role",
          title: "menus.hsRole"
        }
      }
    ]
  };
const permissionRouter = {
  path: "/permission",
  meta: {
    title: "menus.permission",
    icon: "lollipop",
    rank: 7,
  },
  children: [
    {
      path: "/permission/page/index",
      name: "PermissionPage",
      meta: {
        title: "menus.permissionPage",
      },
    },
    {
      path: "/permission/button/index",
      name: "PermissionButton",
      meta: {
        title: "menus.permissionButton",
        authority: [],
      },
    },
  ],
};
app.get("/api/getAsyncRoutes", function (req, res) {
  res.send({
    code: 0,
    info: [permissionRouter,systemRouter],
  });
});

app.listen(3011, () => console.log("http://localhost:3011/"));

跑起來後用 postman 測試

postman 畫面:

JSON:

{
    "code": 0,
    "info": [
        {
            "path": "/permission",
            "meta": {
                "title": "menus.permission",
                "icon": "lollipop",
                "rank": 7
            },
            "children": [
                {
                    "path": "/permission/page/index",
                    "name": "PermissionPage",
                    "meta": {
                        "title": "menus.permissionPage"
                    }
                },
                {
                    "path": "/permission/button/index",
                    "name": "PermissionButton",
                    "meta": {
                        "title": "menus.permissionButton",
                        "authority": []
                    }
                }
            ]
        },
        {
            "path": "/system",
            "meta": {
                "icon": "setting",
                "title": "menus.hssysManagement",
                "rank": 11
            },
            "children": [
                {
                    "path": "/system/role/index",
                    "name": "Role",
                    "meta": {
                        "icon": "role",
                        "title": "menus.hsRole"
                    }
                }
            ]
        }
    ]
}

前端

我們要修改開發中的環境變數，找到.env.development

修改\pure-admin-thin\.env.development

# 前端網頁運行的 port
VITE_PORT = 8848

# 開發環境讀取靜態檔案位置
VITE_PUBLIC_PATH = /

# 開發環境前綴
VITE_PROXY_DOMAIN = /api

# 開發環境路由模式 
VITE_ROUTER_HISTORY = "hash"

# 開發環境后端網址
# 修改這邊變成我們後端寫的網址，改完後ctrl+c重跑一次
VITE_PROXY_DOMAIN_REAL = "http://localhost:3011"

修改後下指令 pnpm dev 再跑一次

如果不中斷重跑會是吃舊的設定唷

修改\pure-admin-thin\src\utils\http\index.ts

上面檔案改好後，改主檔案(作者封裝axios的 instance)

1. 要引入 import { loadEnv } from "@build/index";
2. 加載剛剛的設定檔
   const { VITE_PROXY_DOMAIN, VITE_PROXY_DOMAIN_REAL } = loadEnv();
3. 改API基本網址 baseURL: VITE_PROXY_DOMAIN_REAL + VITE_PROXY_DOMAIN,

//\pure-admin-thin\src\utils\http\index.ts
import Axios, { AxiosInstance, AxiosRequestConfig } from "axios";
import {
  resultType,
  PureHttpError,
  RequestMethods,
  PureHttpResponse,
  PureHttpRequestConfig
} from "./types.d";
import qs from "qs";
import NProgress from "../progress";
import { loadEnv } from "@build/index";
import { getToken } from "/@/utils/auth";
import { useUserStoreHook } from "/@/store/modules/user";

const { VITE_PROXY_DOMAIN, VITE_PROXY_DOMAIN_REAL } = loadEnv();

const defaultConfig: AxiosRequestConfig = {
  baseURL: VITE_PROXY_DOMAIN_REAL + VITE_PROXY_DOMAIN,
  timeout: 10000,
  headers: {
    Accept: "application/json, text/plain, */*",
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest"
  },
  paramsSerializer: params => qs.stringify(params, { indices: false })
};

...省略...

至此，熟練第八天與第十一天的內容後就能自由開API和後端工程師開需要的檔案格式囉~

補充

如果團隊有好幾的 API baseURL 怎麼辦?

作者已經有想到這個狀況，所以封裝的 http.request 方法可以傳入參數修改 config
檔案位置\pure-admin-thin\src\utils\http\index.ts
圖片:

以第八天的 api 當例子
api使用方式是在第四個參數用物件包含 baseURL:

完整程式碼:

import { http } from "../utils/http";

type Result = {
  data?: {
    list: Array<any>;
    total: number;
  };
  code?: number;
  msg?: string;
};

//這邊假設後端 API baseURL 是 youtube
export const getRoleList = (data?: object) => {
  return http.request<Result>(
    "post",
    "/role",
    { data },
    {
      baseURL: "https://www.youtube.com/"
    }
  );
};

這樣就能覆蓋囉!